<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <style>
        * {margin:0; padding:0; font-family: "microsoft yahei", sans-serif; font-size: 14px;}
        .canvas {width:800px;height:600px;overflow: auto;border:1px solid #ccc}
        .control-panel {padding:10px; width:300px;border:1px solid #ccc;margin: 10px;}
        .color {border: 1px solid #666; border-radius: 3px; width: 120px;}
        .label {text-align: right}
        label {cursor: pointer}
        .left {float:right}
        .value {display: inline-block; padding:3px; border: 1px solid #ccc; min-width: 40px;}
        .button {padding:5px 10px; border-radius: 3px;border:1px solid #ccc;color:#000;
            background-color: #efefef;display: inline-block;text-decoration: none;}
        .button:hover {cursor: pointer; background-color: #ffaa50; color:#fff;}
        .formulas li{list-style: none; padding: 5px; margin: 0;}
        .panel-tabel td {border:1px solid #ccc;}
        input[type=button] {padding: 5px 20px; border-radius: 3px; border: 1px solid #ccc; background-color: #ccc;}
        td {padding:5px;}
    </style>
</head>
<body>
<div id="control-panel" class="left control-panel">
	<h3>Control Panel</h3>
    <table>
        <tr>
            <td class="label"><label for="scale">缩放:</label></td>
            <td>
                <input type="range" id="scale" value = "1" min="0.01" max="10" step="0.01" class="color"/>
                <span id="scale-value" class="value"></span>
            </td>
        </tr>
        <tr>
            <td class="label"><label for="type">坐标系:</label></td>
            <td>
                <select id="type">
                    <option value="Cartesian">笛卡尔坐标系</option>
                    <option value="Polar">极坐标系</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="label"></td>
            <td>
                <div id="predefine-curves"></div>
            </td>
        </tr>
    </table>
    <div style='margin-top: 10px'>
        <a class="button" href="../auto-layout/layout.html">自动布局（物理模型）</a>
        <a class="button" href="../cloth/cloth.html">布（物理模型）</a>
    </div>
</div>
<div id="canvas" class="canvas"></div>
<script type="text/javascript" charset="utf-8" src="../../lib/Science.js"></script>
<script type="text/javascript" charset="utf-8" src="Coordinates.js"></script>
</body>
</html>